<template>
    <div class="container">
        <div class="cont" >
            <div class="left" >
                <div class="left-btn" v-for="(temp,index) in 4" :key="index">
                    <div class="btn1" :class=" btn_index===temp?`btn${temp}-active`:''" @click="checked(temp)">
                    <img :src="`./static/00${temp}.png`" alt="">
                    </div>
                </div>
                <!-- <div class="btn1" @click="checked(2)"><img src="@/assets/002.png" alt=""></div>
                <div class="btn1" @click="checked(3)"><img src="@/assets/003.png" alt=""></div>
                <div class="btn1" @click="checked(4)"><img src="@/assets/004.png" alt=""></div> -->
            </div>
            <div class="right">
                <div><img :src="bg" alt=""></div>
                <div class="list-cont">
                    <div  class="list" v-for="(temp,index) in 10" :key="index">
                    <div class="name">电池</div>
                </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            btn_index:1,
            bg:'./static/01.png'
        }
    },
    methods:{
        checked(params){
            this.bg=`./static/0${params}.png`
            this.btn_index=params
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    width: 100%;
    .cont{
            display: flex;
            height: auto;
            justify-content: space-between;
        .left{
            width: 25%;
            // border: 1px solid;
            height: 140vw;
            div{
                padding:5% 5% 0;
                box-sizing: border-box;
                width: 100%;
                // border: 1px solid #ccc;
                img{ 
                    width: 100%;
                    }
            }
        
        }
        .list-cont{
            height: 83vw;
            overflow: scroll;
            margin-top: -5px;
        }
        .btn1{
            border: 3px solid transparent;
            border-radius: 10px;
        }
        .btn1-active{
            border-color: #E43C61;
        }
        .btn2-active{
            border-color: #2DC493;
        }
        .btn3-active{
            border-color: #4076FB;
        }
        .btn4-active{
            border-color: #7F94B4;
        }
        .right{
            height: auto;
            width: 75%;
            // border: 1px solid #c2c;
            div{
                img{
                    width: 100%;
                }
            }
            .list{
                background: #F0F0F0;
                color: #666666;
                padding: 20px 0 15px 20px;
                border-bottom: 1px solid #C1C1C1;
                font-size: 14px;
            }
        }
    }
}
</style>